<template>
	<!-- 校友卡 -->
	<view class="alumnicard-container">
		<!-- 卡片区 -->
		<view class="card">
			<image src="/static/img/alumni/a_card.png" mode="widthFix"></image>
			<view class="wrap" v-if="details.name&&details.id&&details.school_time&&details.college">
				<view class="title">
					<view class="name">{{details.name}}</view>
					<view class="icon"><u-icon name="edit-pen" size="36rpx" color="#fff"></u-icon></view>
				</view>
				<view class="no">No.{{details.id}}</view>
				<view class="item">
					<view class="l">在校时间</view>
					<view class="r">{{details.school_time}}</view>
				</view>
				<view class="item">
					<view class="l">在校院系</view>
					<view class="r">{{details.college}}</view>
				</view>
			</view>
		</view>

		<!-- 协议区-没有协议先注释掉，上线审核过不了 -->
		<!-- 	<view class="protocols">
			<u-checkbox-group v-model="checks" @change="checkboxChange" shape="circle" size="24rpx">
				<u-checkbox label="阅读并同意" :name="1" labelSize="20rpx" labelColor="#9e9e9e">
				</u-checkbox>
			</u-checkbox-group>
			<navigator class="title" url="">《相关准则》</navigator>
		</view> -->

		<!-- 申请按钮 -->
		<view class="btn" v-if="!details.name||!details.id||!details.school_time||!details.college" @tap="getCard">申请校友卡
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 校友卡信息
				details: {},
				// 多选框的值
				checks: []
			}
		},
		methods: {

			/**
			 * 获取校友卡信息
			 */
			getCardInfo() {
				this.$request.post({
					url: '/api/users/getCardInfo',
					data: {
						user_id: uni.getStorageSync('user_data').id
					},
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg
						})
						this.details = res.result.data
					}
				})
			},

			/**
			 * 申请校友卡
			 */
			getCard() {
				// if (this.checks.length == 0 || this.checks.indexOf(1) == -1) return uni.showToast({
				// 	title: '请勾选并同意相关准则'
				// })
				uni.navigateTo({
					url: `/pages/Schoolfriend_apply/Schoolfriend_apply?detail=${JSON.stringify(this.details)}`
				})
			},

			/**
			 * 勾选用户协议
			 * @param {array} value 已勾选的多选框
			 */
			checkboxChange(value) {
				this.checks = value
			},

		},
		onShow() {
			this.getCardInfo()
		}
	}
</script>

<style lang="less" scoped>
	.alumnicard-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		overflow: hidden;
		padding: 20rpx 20rpx 0;
		box-sizing: border-box;

		.card {
			width: 100%;
			height: 420rpx;
			position: relative;

			>image {
				width: 100%;
			}

			.wrap {
				position: absolute;
				top: 168rpx;
				left: 28rpx;
				z-index: 99;

				.title {
					display: flex;
					align-items: center;

					.name {
						width: 116rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 46rpx;
					}

					.icon {
						width: 36rpx;
						height: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.item {
					display: flex;
					align-items: center;
					margin-top: 8rpx;

					.l {
						width: 116rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
					}

					.r {
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}

				.no {
					margin-top: 48rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
		}

		.protocols {
			margin-top: 62rpx;
			display: flex;
			align-items: center;

			.title {
				font-size: 20rpx;
				color: #275BA8;
			}
		}

		.btn {
			width: 100%;
			height: 80rpx;
			background-color: #275BA8;
			border-radius: 10rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 46rpx;
			letter-spacing: 1px;
			margin-top: 18rpx;
		}
	}
</style>